<template>
  <div id="content-container" :style=" {'padding-top':paddingTop+'px'}">
    <drag-here v-show="isEdit && !componentsLength"></drag-here>
    <slot></slot>

  </div>
</template>
<script>
  import {getPageNameOrVirtualPageName} from "../../utils/getPageName";
  import {getPageTree} from "../../utils/getPageTree";
  import DragHere from "../../style-components/DragHere";
  import {mapGetters} from "vuex";
  export default {
    data () {
      return {
        paddingTop: 0
      }
    },
    computed: {
      ...mapGetters([
        "getRouterLifeCycleOfName",
      ]),
      defaultVirtualDomObject() {
        return {
          header: [],
          content: [],
          footer: []
        }
      },
      pageName() {
        // return this.getRouterLifeCycleOfName;
        return getPageNameOrVirtualPageName();
      },
      pageTree() {
        // console.log("content-container页面的", getPageTree(this, this.pageName.name));
        return getPageTree(this, this.pageName);
        // return ;
      },
      componentsLength() {
        if (this.pageTree.content) {
          return Object.keys(this.pageTree.content).length;
        }
        return true;
      },
      //判断环境
      isEdit() {
        return window.environment === "edit";
      }
    },
    created () {

      PSEvent.listen('headerHeightOnChange', this.refresh)
    },
    methods: {
      refresh () {
        // this.$nextTick(() => {
        //   var headerContainer = document.querySelector('.headerContainer')
        //   this.paddingTop = headerContainer ? headerContainer.offsetHeight : 0
        // })
      }
    },
    components: {
      "drag-here": DragHere
    },
    beforeDestroy() {
      PSEvent.remove && PSEvent.remove('headerHeightOnChange', this.refresh)
    }
  }

</script>
<style scoped>
  #content-container {
    /* flex: 1;
    overflow-y: auto; */
    /* min-height: 200px; */
  }
</style>
